<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="main" id="main">
        <div class="m-head">
            <img src="img/logo.png">
            <span id="time"></span>
        </div>
        <div class="m-left">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
            </ul>
        </div>
        <div class="m-right">
            <div class="right-content active">
                <div class="right-top">
                    <div class="parameter">
                        <ul>
                            <li>
                                <span>名称：</span>
                                test1
                            </li>
                        </ul>
                    </div>
                    <div class="center">{{ value1 }}</div>
                    <div class="operation">
                        <a href="">添加新数据</a>
                        <a href="">添加</a>
                    </div>
                </div>
                <div class="m-eChart" id="m-eChart01"></div>
            </div>
            <div class="right-content">
                <div class="right-top">
                    <div class="parameter">
                        <ul>
                            <li>
                                <span>名称：</span>
                                test2
                            </li>
                        </ul>
                    </div>
                    <div class="center">{{ value2 }}</div>
                    <div class="operation">
                        <a href="">添加新数据</a>
                        <a href="">添加</a>
                    </div>
                </div>
                <div class="m-eChart" id="m-eChart02">2</div>
            </div>
            <div class="right-content">
                <div class="right-top">
                    <div class="parameter">
                        <ul>
                            <li>
                                <span>名称：</span>
                                test3
                            </li>
                        </ul>
                    </div>
                    <div class="center">{{ value3 }}</div>
                    <div class="operation">
                        <a href="">添加新数据</a>
                        <a href="">添加</a>
                    </div>
                </div>
                <div class="m-eChart" id="m-eChart03">3</div>
            </div>
            <div class="right-content">
                <div class="right-top">
                    <div class="parameter">
                        <ul>
                            <li>
                                <span>名称：</span>
                                test4
                            </li>
                        </ul>
                    </div>
                    <div class="center">{{ value4 }}</div>
                    <div class="operation">
                        <a href="">添加新数据</a>
                        <a href="">添加</a>
                    </div>
                </div>
                <div class="m-eChart" id="m-eChart04">4</div>
            </div>
            <div class="right-content">
                <div class="right-top">
                    <div class="parameter">
                        <ul>
                            <li>
                                <span>名称：</span>
                                test5
                            </li>
                        </ul>
                    </div>
                    <div class="center">{{ value5 }}</div>
                    <div class="operation">
                        <a href="">添加新数据</a>
                        <a href="">添加</a>
                    </div>
                </div>
                <div class="m-eChart" id="m-eChart05">5</div>
            </div>
            <div class="right-content">
                <div class="right-top">
                    <div class="parameter">
                        <ul>
                            <li>
                                <span>名称：</span>
                                test6
                            </li>
                        </ul>
                    </div>
                    <div class="center">
                        {{ value6 }}
                    </div>
                    <div class="operation">
                        <a href="">添加新数据</a>
                        <a href="">添加</a>
                    </div>
                </div>
                <div class="m-eChart" id="m-eChart06">6</div>
            </div>
        </div>
    </div>
</body>
<script>
	var ip = "http://118.31.76.167/SZIOT/";
	$.ajax({ url: ip + "device/login", 
        type: 'GET',
        xhrFields: {  
                withCredentials: true  
            },  
            crossDomain: true,
        success: function(response){
        console.log(response)
      },error: function(error){
      	console.log(error)
      }});
    var main = new Vue({
          el: '#main',
          data: {
            value1: 0,
            value2: 0,
            value3: 0,
            value4: 0,
            value5: 0,
            value6: 0
          }
      })
    var myChart01 = null,myChart02 = null,myChart03 = null,myChart04 = null,myChart05 = null,myChart06 = null;
    $('.m-left').find("li").bind('click',function(){
        $(this).addClass('active').siblings().removeClass('active');
        var activeIndex = $('.m-left').find("li").index(this);
        $('.m-right').children().eq(activeIndex).addClass("active").siblings().removeClass('active');
        switch (activeIndex){
            case 1:
                option.series[0].name = 'test2'
                myChart02 = myChart02 == null ? echarts.init(document.getElementById('m-eChart02')) : myChart02;
                myChart02.setOption(option);
                break;
            case 2:
                option.series[0].name = 'test3'
                myChart03 = myChart03 ==null ? echarts.init(document.getElementById('m-eChart03')) : myChart03;
                myChart03.setOption(option);
                break;
            case 3:
                option.series[0].name = 'test4'
                myChart04 = myChart04 ==null ? echarts.init(document.getElementById('m-eChart04')) : myChart04;
                myChart04.setOption(option);
                break;
            case 4:
                option.series[0].name = 'test5'
                myChart05 = myChart05 ==null ? echarts.init(document.getElementById('m-eChart05')) : myChart05;
                myChart05.setOption(option);
                break;
            case 5:
                option.series[0].name = 'test6'
                myChart06 = myChart06 ==null ? echarts.init(document.getElementById('m-eChart06')) : myChart06;
                myChart06.setOption(option);
                break;
        }


    });


    myChart01 = echarts.init(document.getElementById('m-eChart01'));
    option = {
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'test1',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: []
        }]
    };
    var data1 = [],data2 = [], data3 = [], data4 = [], data5 = [], data6 = []; 
    setInterval(function () {
        $.ajax({ url: ip + "device/getAll",type: 'GET', dataType: 'json',
            xhrFields: {  
                withCredentials: true  
            },  
            crossDomain: true,
            success: function(response){
            console.log(response)
            setOptionFun(response)
          },error: function(error){
            console.log(error)
          }});
    }, 1000);

    function setOptionFun (data) {
        console.log(data1)
        main.value1 = data.test1.value[1]
        main.value2 = data.test2.value[1]
        main.value3 = data.test3.value[1]
        main.value4 = data.test4.value[1]
        main.value5 = data.test5.value[1]
        main.value6 = data.test6.value[1]
        data1.push(data.test1)
        data2.push(data.test2)
        data3.push(data.test3)
        data4.push(data.test4)
        data5.push(data.test5)
        data6.push(data.test6)
        data1.length > 80 ? data1.shift() : ''
        data2.length > 80 ? data2.shift() : ''
        data3.length > 80 ? data3.shift() : ''
        data4.length > 80 ? data4.shift() : ''
        data5.length > 80 ? data5.shift() : ''
        data6.length > 80 ? data6.shift() : ''
        myChart01.setOption({
            series: [{
                data: data1
            }]
        });
        myChart02 != null ? myChart02.setOption({
            series: [{
                data: data2
            }]
        }) : '';
        myChart03 != null ? myChart03.setOption({
            series: [{
                data: data3
            }]
        }) : '';
        myChart04 != null ? myChart04.setOption({
            series: [{
                data: data4
            }]
        }) : '';
        myChart05 != null ? myChart05.setOption({
            series: [{
                data: data5
            }]
        }) : '';
        myChart06 != null ? myChart06.setOption({
            series: [{
                data: data6
            }]
        }) : '';
    }

    myChart01.setOption(option);
    function showTime(){
        var nowTime = new Date();
        var year = nowTime.getFullYear();
        var month = nowTime.getMonth()+1;
        var date = nowTime.getDate();
        document.getElementById("time").innerText=year+"年"+month+"月"+date+"日 "+nowTime.toLocaleTimeString();
    }

    setInterval("showTime()",1000);
</script>
</html>